<template>
  <div class="p-2 image-item">
    <div
      class="flex cursor-pointer flex-col hot mb-4 rounded-2xl p-4 bg-[var(--headBg)] box-border hover:bg-[var(--active)]"
    >
      <div class="relative" @click="handleClick">
        <img v-lazy-image="{ src: coverImgUrl, size: 100 }" class="rounded w-[100%] h-[80%]" />
        <span class="iconfont icon-Playlists-xiayishoubofang absolute icon-play"></span>
      </div>
      <span class="text-sm mt-2 hot-text">{{ describeText }}</span>
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'

const props = defineProps({
  item: Object,
  coverImgType: {
    type: String,
    default: 'coverImgUrl'
  },
  describeText: {
    type: String,
    default: 'name'
  }
})

const coverImgUrl = computed(() => {
  return props.item[props.coverImgType]
})

const describeText = computed(() => {
  return props.item[props.describeText]
})

const emit = defineEmits(['handleClick'])
const handleClick = () => {
  emit('handleClick', props.item)
}
</script>

<style lang="scss" scoped>
.hot:hover {
  transform: scale(1.01) translateY(-10px);
}

.hot-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.image-item {
  width: calc((100% - 0.5rem) / 4);
  aspect-ratio: 1 / 1;

  &:hover .icon-play {
    opacity: 1;
  }
}

@media (min-width: 1200px) {
  .image-item {
    width: calc((100% - 0.5rem) / 5);
  }
}

.icon-play {
  font-size: 2.5rem;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0;
}
</style>
